<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	String csspath =  basePath+"WebRoot/WEB-INF/views/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'list.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="views/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="views/jquery/css/easyui.css">
	<script type="text/javascript" src="views/jquery/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="views/jquery/jquery.js"></script>
	<script type="text/javascript" src="views/jquery/jquery.easyui.min.js"></script>
  </head>
  
  <body>
  <div id="dictMessager"></div>
  <div id="bgdiv" >
   	<table id="bglist" class="easyui-datagrid" style="width:300px;height:200px">
     <thead>
		<tr>
			<th data-options="field:'title',align:'center',width:100">TITLE</th>
			<th data-options="field:'desc',align:'center',width:80,align:'right'">DESC</th>
			<th data-options="field:'id',width:120,formatter:operatorFmt">操作</th>
		</tr>
    </thead>
   	</table>
   	</div>
   	<div id="dictDialog" class="easyui-dialog"
		style="width: 600px; padding: 10px;"
		data-options="inline:true,modal:true,closed:true,buttons:'#dictDialogBtns'">

		<div class="form-horizontal">
			<div id="dictDialogMsg"></div>
			<input type="hidden" id="id" />
			<div class="control-group">
				<label class="control-label" for="title">标题</label>
				<div class="controls">
					<input type="text" id="title" name="title" placeholder="请输入标题" /> 
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="desc">描述</label>
				<div class="controls">
					<input type="text" id="desc" name="desc" placeholder="请输入描述" /> 
				</div>
			</div>
		</div>
	</div>
  </body>
  <script>
  		
  		$("#bglist").datagrid({
  			url:"hello/listData",
  			title:'列表页',
  		});
  		function operatorFmt(value, row, index){
			return "<button  class='grid-linkbutton'  plain='true' "
					+ "onclick='edit(\""+value+"\")'>编辑</button> "
					+ "<button class='grid-linkbutton'  plain='true' "
					+ "onclick='del(\""+value+"\")'>删除</button> ";
		}
  		
  		function edit(value){
  				
  		}
  		
  		 function reloadData(_queryParams){
			$("#bglist").datagrid('clearSelections').datagrid("load", _queryParams);
		}
  		 var basepath = '<%=basePath%>';
		function del(value){
  			var flag=window.confirm('确定删除数据吗?')
  				if(flag){
					$.post(basepath+"hello/del",{'id':value},function(data){
					if(data.flag){
						reloadData();
						//alert(data.msg);
					bootstrap.alert(data.msg);	
					}
 					});
  				}
  		}
		
		function edit(value){
			var id =value;
			$.ajax({
				url:"hello/find?id="+id,
				dataType:"json",
				Type:"get",
				cache:false,
				success:function(data){
					$("#title").value=data.title;
					$("#desc").value=data.desc;
					$('.dict-save').bind('click', edit);
					$('#dictDialog').dialog({title:'修改数据信息'}).dialog('open');
				},
				error:function(){
					alert("系统异常！请联系管理员！");
				}
			});
			
		}
		function closeDiloag(){
			$('.dict-save').unbind('click');
			$('#dictDialog').dialog('close');
		}
		
		
  		
  </script>
</html>
